<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      lang="zh-cn">
<head>
    <meta content="云之讯,云通讯,云通讯平台" name="keywords"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
    <title>短信云平台运营系统 </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <link href="/resources/css/bootstrap.min14ed.css?v=3.3.6" th:href="@{/resources/css/bootstrap.min14ed.css?v=3.3.6}" rel="stylesheet">
    <link href="/resources/css/font-awesome.min93e3.css?v=4.4.0" th:href="@{/resources/css/font-awesome.min93e3.css?v=4.4.0}" rel="stylesheet"><!-- jqgrid-->
    <link href="/resources/js/plugins/jqgrid/css/ui.jqgrid-bootstrap.css" th:href="@{/resources/js/plugins/jqgrid/css/ui.jqgrid-bootstrap.css}" rel="stylesheet">
    <link href="/resources/css/animate.min.css" th:href="@{/resources/css/animate.min.css}" rel="stylesheet">
    <link href="/resources/css/style.min862f.css?v=4.1.0" th:href="@{/resources/css/style.min862f.css?v=4.1.0}" rel="stylesheet">
    <link href="/resources/css/plugins/sweetalert/sweetalert.css" th:href="@{/resources/css/plugins/sweetalert/sweetalert.css}" rel="stylesheet">
    <link th:href="@{/resources/css/select2.css}" rel="stylesheet">
    <style>
        /* Additional style to fix warning dialog position */
        #alertmod_table_list_2 {
            top: 900px !important;
        }
        .modal-body input{
            width:150px;
        }
        .select2 span{
            display:block !important;
            margin-top: 0px !important;
        }
        .select2-container {
            width: 171px !important;
        }
        .select2-dropdown {
            width: 175px !important;
        }
        .select2-container .select2-selection--single{
            width:175px;
        }
        .ml20 {
            margin-left: 20px;
        }
        .mt20 {
            margin-top: 20px;
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content  animated fadeInRight">

    <div class="row">
        <div class="col-sm-12">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active" id="agentTab" ><a data-toggle="tab" href="#tab-1" aria-expanded="true">投诉明细管理</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div id="tab-1" class="tab-pane active">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="ibox ">
                                        <!-- 搜索条件 -->
                                        <div class="ibox-content">
                                            <input type="hidden" th:value="${jsmsMenu.menuId}" id="menuId">
                                            <div class="row">
                                                <form role="form" class="form-inline col-sm-12" id="mainForm" method="POST">
                                                    <!-- 时间选择 -->
                                                    <div class="form-group sandbox-container ml20 mt20" >
                                                        <div class="form-group pull-right"><span style="font-weight:700">发送日期:</span>
                                                            <input placeholder="开始日期" class="form-control layer-date" id="start_time_day" name="sendTimeStart" />至
                                                            <input placeholder="结束日期" class="form-control layer-date" id="end_time_day" name="sendTimeEnd"/>
                                                        </div>
                                                    </div>
                                                    <div class="form-group ml20 mt20">
                                                        <label for="sign">签名:</label>
                                                        <input type="text" placeholder="签名" id="sign" name="sign" class="form-control">
                                                    </div>
                                                    <div class="form-group ml20 mt20">
                                                        <label for="status">投诉内容:</label>
                                                        <input type="text" placeholder="投诉内容" id="condition" name="content" class="form-control">
                                                    </div>
                                                    <div class="form-group ml20 mt20">
                                                        <label for="client">客户:</label>
                                                        <select id="client" name="clientId" class="form-control"></select>
                                                    </div>
                                                    <div class="form-group ml20 mt20">
                                                        <label for="saler">归属销售:</label>
                                                        <select id="saler" name="belongSale" class="form-control"></select>
                                                    </div>
                                                    <div class="form-group ml20 mt20">
                                                        <label for="channel">投诉通道:</label>
                                                        <select id="channel" name="channelId" class="form-control"></select>
                                                    </div>
                                                    <div class="form-group ml20 mt20">
                                                        <label for="operator">运营商:</label>
                                                        <select id="operator" name="operatorstype" class="form-control" style="width: 200px;">
                                                            <option value="">全部</option>
                                                            <option value="0">全网</option>
                                                            <option value="1">移动</option>
                                                            <option value="2">联通</option>
                                                            <option value="3">电信</option>
                                                            <option value="4">国际</option>
                                                        </select>
                                                    </div>
                                                    <div class="form-group ml20 mt20">
                                                        <label for="operatorStr">录入者:</label>
                                                        <input type="text" placeholder="录入者" id="operatorStr" name="operatorStr" class="form-control">
                                                    </div>
                                                    <div class="form-group sandbox-container ml20 mt20" >
                                                        <div class="form-group pull-right"><span style="font-weight:700">录入时间:</span>
                                                            <input placeholder="开始日期" class="form-control layer-date" id="enter_time_start" name="createTimeStart" />至
                                                            <input placeholder="结束日期" class="form-control layer-date" id="enter_time_end" name="createTimeEnd"/>
                                                        </div>
                                                    </div>
                                                    <div class="form-group ml20  mt20">
                                                        <span>&nbsp;&nbsp;<button type="button" id="search_btn" class="btn btn-sm btn-success" onclick="search()">搜索</button></span>
                                                        <span>&nbsp;&nbsp;<button type="button" class="btn btn-sm btn-primary hide" data-toggle="modal" data-target="#myModal" data-menuId='6705'>批量导入</button></span>
                                                        <span>&nbsp;&nbsp;<button type="button" class="btn btn-sm btn-yellow hide" onclick="exportExcel()" data-menuId='6706'>导出</button></span>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>

                                        <div class="ibox-content">
                                            <div class="jqGrid_wrapper">
                                                <table id="table_list"></table>
                                                <div id="pager_list"></div>
                                            </div>
                                            <p>&nbsp;</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div><!-- panel-body -->
                    </div><!-- tab-1 -->

                    <input type="hidden" id="clientId" th:value="${clientId}">
                    <input type="hidden" id="operatorstype" th:value="${operatorstype}">
                    <input type="hidden" id="smstype" th:value="${smstype}">
                    <input type="hidden" id="sendTimeStart" th:value="${sendTimeStart}">
                    <input type="hidden" id="sendTimeEnd" th:value="${sendTimeEnd}">
                    <input type="hidden" id="channelId" th:value="${channelId}">

                </div><!-- panel-body -->
            </div><!-- tab-2 -->
        </div><!-- tab-content -->
    </div><!-- tabs-container-->
</div><!-- col-sm-12 -->
</div><!-- row -->
</div>
<!-- 批量导入弹出框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="clean()"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">批量导入</h4>
            </div>
            <div class="modal-body" id="formClick">
                <form class="form-horizontal" method="post" id="importForm">
                    <input type="file" id="importInput" name="excel" accept=".xls,.xlsx"/>
                </form>
                <br class="controls">
                <span id="msg" style="display:none;"></span>
                <br><span id="total" style="display:none;"></span></br>
                <br><span id="success" style="display:none;"></span></br>
                <br><span id="fall" style="display:none;"></span></br>
                &nbsp;&nbsp;<span id="tips" style="display:none;">点击<a href='/operation/statistics/complaint/exportImportResult'><font color="green">下载</font></a>导入失败结果列表</span>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn" onclick="downloadExcelTemplate()">下载Excel模板</a>
                <a href="#" class="btn" data-dismiss="modal" onclick="clean()">关闭</a>
                <a href="#" class="btn btn-primary" onclick="importExcel(this)">导入</a>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/resources/js/jquery.min.js?v=2.1.4}"></script>
<script th:src="@{/resources/js/bootstrap.min.js?v=3.3.6}"></script>
<script th:src="@{/resources/js/content.min.js?v=1.0.0}"></script>
<script th:src="@{/resources/js/plugins/peity/jquery.peity.min.js}"></script>
<script th:src="@{/resources/js/plugins/jqgrid/js/i18n/grid.locale-cn.js}"></script>
<script th:src="@{/resources/js/plugins/jqgrid/js/jquery.jqGrid.min.js}"></script>
<script th:src="@{/resources/js/date_format.min.js?v=1.0.0}"></script>
<script th:src="@{/resources/js/plugins/sweetalert/sweetalert.min.js}"></script>
<script th:src="@{/resources/js/plugins/validate/jquery.validate.min.js}"></script>
<script th:src="@{/resources/js/jquery.form.js?v=1.0.0}"></script>
<script th:src="@{/resources/js/common.js?v=1.0.0}"></script>
<script th:src="@{/resources/js/layer/layer.js}"></script>
<script th:src="@{/resources/js/select2.min.js}"></script>
<script th:src="@{/resources/js/plugins/layer/laydate/laydate.js}"></script>
<script th:inline="javascript">
    /*<![CDATA[*/



    var start = {
        elem: "#start_time_day",
        format: "YYYY-MM-DD",
        min: halfYearAgo("yyyy-MM-dd"),
        istoday: true,
        choose: function (datas) {
            end.min = datas;
        }
    };
    var end = {
        elem: "#end_time_day",
        format: "YYYY-MM-DD",
        min: halfYearAgo("yyyy-MM-dd"),
        istoday: true,
        choose: function (datas) {
            start.max = datas;
        }
    };

    var start1 = {
        elem: "#enter_time_start",
        format: "YYYY-MM-DD",
        min: halfYearAgo("yyyy-MM-dd"),
        max: laydate.now(),
        istoday: true,
        choose: function (datas) {
            end.min = datas;
        }
    };
    var end1 = {
        elem: "#enter_time_end",
        format: "YYYY-MM-DD",
        min: halfYearAgo("yyyy-MM-dd"),
        max: laydate.now(),
        istoday: true,
        choose: function (datas) {
            start.max = datas;
        }
    };
    laydate(start);
    laydate(end);
    laydate(start1);
    laydate(end1);
    function search(){
        $("#table_list").jqGrid('setGridParam',{
            datatype:'json',
            postData: {
                sendTimeStart: $("#start_time_day").val(),
                sendTimeEnd: $("#end_time_day").val(),
                sign: $("#sign").val(),
                content: $("#condition").val(),
                clientId: $("#client").val(),
                belongSale: $("#saler").val(),
                channelId: $("#channel").val(),
                operatorstype: $("#operator").val(),
                realname: $("#realname").val(),
                operatorStr: $("#operatorStr").val(),
                createTimeStart: $("#enter_time_start").val(),
                createTimeEnd: $("#enter_time_end").val()
            }, //发送数据
            page:1
        }).trigger("reloadGrid"); //重新载入
    }

    //功能按钮权限
    function completeMethod(){
        var menuId = $("#menuId").val();
        checkMenu(menuId);
    }

    $(document).ready(function () {
        var cid = $("#channelId").val() || '';
        var cname = $("#clientId").val() || '';
        var clientid = getUrlParam('clientid') || '';
        var date = getUrlParam('date') || '';
        var operatorstype = $("#operatorstype").val() || "";
        var smstype = $("#smstype").val() || '';




        if(cid){
            $("#channel").val(cid)
        }
        if(clientid){
            $("#client").val(clientid)
        }
        if(operatorstype){
            $("#operator").val(operatorstype)
        }
        $("#start_time_day").val($("#sendTimeStart").val())
        $("#end_time_day").val($("#sendTimeEnd").val())
        //获取三个下拉搜索
        var select2Date1;
        var select2Date2;
        var select2Date3;
        $.ajax({
            url : '/operation/statistics/complaint/queryListForAccount',
            dataType : 'json',
            type:'post',
            async : false,
            success : function(res){
                for(var i = 0; i < res.length; i++){
                    res[i].id = res[i].clientid;
                    res[i].text = res[i].clientid+"-"+res[i].name ;
                }
                res.unshift({id:" ",text:"全部客户"});
                select2Date1 = res;
            }
        });
        $.ajax({
            url : '/operation/statistics/complaint/queryListForUser',
            dataType : 'json',
            type:'post',
            async : false,
            success : function(res){
                for(var i = 0; i < res.length; i++){
                    res[i].id = res[i].id;
                    res[i].text = res[i].realname ;
                }
                res.unshift({id:" ",text:"全部销售"});
                select2Date2 = res;
            }
        });
        $.ajax({
            url : '/operation/statistics/complaint/queryListForChannel',
            dataType : 'json',
            type:'post',
            async : false,
            success : function(res){
                for(var i = 0; i < res.length; i++){
                    res[i].id = res[i].cid;
                    res[i].text = res[i].cid+ "-" + res[i].channelname ;
                }
                res.unshift({id:" ",text:"全部通道"});
                select2Date3 = res;
            }
        });
        //初始化select2
        $("#client").select2({
            data : select2Date1
        });
        $("#saler").select2({
            data : select2Date2
        });
        $("#channel").select2({
            data : select2Date3
        });
        if(cid){
            $("#channel").val(cid).trigger('change');
        }
        if(cname){
            $("#client").val(cname).trigger('change');
        }

        $("#search_btn").trigger("click");


        $.jgrid.defaults.styleUI = "Bootstrap";
        $("#table_list").jqGrid({
            url:/*[[@{/operation/statistics/complaint/searchComplaint}]]*/'',
            mtype: 'POST',
            datatype: "json",
            jsonReader : {
                root:"entityList",
                page: "pageNo",
                total: "totalPage",
                records: "totalCount"
            },
            postData : {
                sendTimeStart: $("#start_time_day").val(),
                sendTimeEnd: $("#end_time_day").val(),
                sign: $("#sign").val(),
                content: $("#condition").val(),
                clientId: $("#client").val(),
                belongSale: $("#saler").val(),
                channelId: $("#channel").val(),
                operatorstype: $("#operator").val(),
                realname: $("#realname").val(),
                operatorStr: $("#operatorStr").val(),
                createTimeStart: $("#enter_time_start").val(),
                createTimeEnd: $("#enter_time_end").val()
            },
            height: 'auto',
            rownumbers:true,
            autowidth: true,
            shrinkToFit: true,
            autoScroll: true,
            rowNum: 20,
            rowList: [10, 20, 30,50],
            colModel: [
                {label:'发送日期',name: "sendTimeStr",align: "left",sortable:false,width:'120'},
                {label:'投诉手机号',name: "phone",align: "left",sortable:false,width:'100'},
                {label:'对应签名',name: "sign", align: "left",sortable:false,width:'75'},
                {label:'投诉内容',name: "content", align: "left",sortable:false,width:'75'},
                {label:'备注',name: "remark", align: "left",sortable:false,width:'70'},
                {label:'客户账号',name: "clientId", align: "left",sortable:false,width:'100'},
                {label:'客户名称',name: "name", align: "left",sortable:false,width:'90'},
                {label:'短信类型',name: "smstype", align: "left",sortable:false,width:'120',
                    formatter:function(cellvalue){
                        if(cellvalue =="0"){
                            cellvalue = '通知';
                        }else if(cellvalue =="5"){
                            cellvalue = '营销';
                        }else if(cellvalue =="4"){
                            cellvalue = '验证码';
                        }else if(cellvalue =="6"){
                            cellvalue = '告警短信';
                        }else if(cellvalue =="7"){
                            cellvalue = 'USSD';
                        }else if(cellvalue =="8"){
                            cellvalue = '闪信';
                        }else{
                            cellvalue = '';
                        }
                        return cellvalue;
                    }
                },
                {label:'所属销售',name: "realname", align: "left",sortable:false,width:'80'},
                {label:'通道号',name: "channelId",align: "left",sortable:false,width:'65'},
                {label:'通道名称',name: "channelname",align: "left",sortable:false,width:'55'},
                {label:'运营商',name: "operatorstypeStr",align: "left",sortable:false,width:'50'},
                {label:'录入者',name: "operatorStr",align: "left",sortable:false,width:'60',},
                {label:'录入时间',name: "createTimeStr",align: "left",sortable:false,width:'120'},
                {label:"操作",name: "id",align: "left",sortable:false,width:'100',title: false,
                    formatter:function(cellvalue, options, rowObject){
                        var switcher = "<button type='button' class='btn btn-link btn-xs  hide' onclick=\"del('"+cellvalue+"')\" title='删除' data-menuId='6707'>删除</button>";
                        return switcher;
                    }
                }
            ],
            gridComplete: completeMethod,
            pager: "#pager_list",
            viewrecords: true,
            hidegrid: false
        });

        $(window).bind("resize", function () {
            var width = $(".jqGrid_wrapper").width();
            $("#table_list").setGridWidth(width);
        })


        function keyUp(e) {
            var currKey=0,e=e||event;
            currKey=e.keyCode||e.which||e.charCode;
            var keyName = String.fromCharCode(currKey);
            if (currKey == 13){
                search();
            }
        }
        document.onkeyup = keyUp;


        var page =  /*[[${page}]]*/'';
        if(page=="toRebatePage"){
            $("#rebateConfigPage").click();
        }
    });

    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg); //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
    }
    //Excel批量导入
    function importExcel(btn) {
        $("#msg").hide();
        $("#total").hide();
        $("#tips").hide();
        $("#success").hide();
        $("#fall").hide();
        var index = "";
        var options = {
            beforeSubmit: function () {
                $(btn).attr("disabled", true);
                index = layer.load(1, {
                    shade: [0.5, '#fff'] //0.5透明度的白色背景
                });
            },
            success: function (data) {
                $(btn).attr("disabled", false);
                layer.close(index);
                if (data == null) {
                    $("#msg").text("服务器错误，请联系管理员").show();
                    return;
                }
                if (data.code == 500) {
                    $("#msg").text(data.msg).show();
                } else {
                    $("#success").show();
                    $("#fall").show();
                    $("#total").show();
                    if(data.data.importFall>0){
                        $("#tips").show();
                    }else{
                        $("#tips").hide();
                    }
                    $("#total").text("本次共提交模板数量："+data.data.importTotal+"条").show();
                    $("#success").text("导入成功模板数量："+data.data.importSuccess+"条").show();
                    $("#fall").text("导入失败模板数量："+data.data.importFall+"条").show();
                }

            },
            url: "/operation/statistics/complaint/addComplaintBatch",
            type: "post",
//            async : false,
            timeout: 20000
        };
        if($("#importInput").val()!=''){
            $("#importForm").ajaxSubmit(options);
        }else{
            layer.msg("请先选择文件", {icon:2});
        }
    }
    function clean(){
        $("#msg").hide();
        $("#tips").hide();
        $("#success").hide();
        $("#fall").hide();
        $("#total").hide();
        $("#importInput").val("");
    }
    function downloadExcelTemplate(){
        var url = "/operation/statistics/complaint/downloadExcelComplaint";
        jQuery('<form action="'+url+'" method="get"></form>').appendTo('body').submit().remove();
    }


    //下载报表
    function exportExcel(){
        var totalCount = $("#table_list").jqGrid('getGridParam','records');
        if (totalCount == 0) {
            layer.msg("共0条记录，将不导出Excel文件", {icon: 2});
            return;
        }
        var mainForm = $("#mainForm");
        var action = mainForm.attr("action") || "";
        var exporUrl = "/operation/statistics/complaint/complaintListExport";
        mainForm.attr("action", exporUrl).submit();
        mainForm.attr("action", action);
    }






    function del(id){
        layer.confirm("确定删除此投诉信息吗？", function(index){
            $.ajax({
                url : '/operation/statistics/complaint/deleteById',
                data : {
                    id:id
                },
                type:'post',
                async : false,
                success : function(res){
                    layer.msg(res.msg);
                    search();
                }
            });
        });

    }



    /*]]>*/
</script>
</body>
</html>